﻿<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-07-22 11:04:00
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-04-06 16:12:21
 * @Description: 功能权限详情
 -->
<template>
  <div>
    <fks-dialog
      :visible.sync="show"
      :append-to-body="true"
      width="960px"
      :title="title"
      @close="close"
    >
      <div slot="title">
        <i v-if="form.operate_type == 'add'" class="fks-icon-plus" />
        <i v-if="form.operate_type == 'edit'" class="fks-icon-edit" />
        {{ title }}
      </div>
      <fks-form ref="form" :model="form" label-width="85px" :rules="rules">
        <fks-form-item
          lead
          :span="12"
          required
          :label="LANG.FUN_NAME"
          prop="name"
        >
          <fks-input v-model="form.name" maxlength="50" show-word-limit />
        </fks-form-item>
        <fks-form-item :span="12" required :label="LANG.FUN_CODE" prop="code">
          <fks-input
            :placeholder="LANG.DATA_CODE_TIP"
            v-model="form.code"
            maxlength="50"
            show-word-limit
            :disabled="form.operate_type != 'add'"
          />
        </fks-form-item>
        <fks-form-item :span="12" lead :label="LANG.IS_AUTH" prop="isAuth">
          <fks-switch v-model="form.isAuth" />
        </fks-form-item>
        <!--菜单分级-->
        <fks-form-item :span="12" lead :label="LANG.INTERFACE" prop="url">
          <fks-input
            placeholder="按钮对应接口路径,例:/sys-user/users/page"
            v-model="form.url"
            maxlength="255"
            show-word-limit
          />
        </fks-form-item>
        <fks-form-item :span="12" :label="LANG.HTTP_METHOD" prop="httpMethod">
          <!-- <fks-input v-model="form.httpMethod"></fks-input> -->
          <fks-select
            v-model="form.httpMethod"
            class="select"
            :placeholder="LANG.PLEASE_SELECT"
          >
            <fks-option
              v-for="(item, index) in httpMethodList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </fks-select>
        </fks-form-item>
        <fks-form-item :label="LANG.REMARK" prop="remark">
          <fks-input
            v-model="form.remark"
            type="textarea"
            maxlength="255"
            show-word-limit
          />
        </fks-form-item>
      </fks-form>
      <template slot="footer" style="text-align: right">
        <!-- <fks-button @click="close" type="primary" plain>
          {{ LANG.CANCEL }}
        </fks-button> -->
        <fks-button type="primary" icon="fks-icon-check" @click="submit">
          {{ LANG.SAVE }}
        </fks-button>
      </template>
    </fks-dialog>
  </div>
</template>
<script>
import * as Auth from '../api'
import { AUTH_PORTAL } from '@/store/Getter/getterTypes.js'
export default {
  name: 'FunDetail',
  props: {
    data: {
      default() {
        return {
          name: '',
          code: '',
          url: '',
          httpMethod: '',
          sort: '',
          remark: '',
          isGeneral: true
        }
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    menuId: {
      default: ''
    }
  },

  data() {
    return {
      form: {
        isAuth: true
      },
      metas: [],
      meta: {
        key: '',
        value: ''
      },
      baseCode: '',
      metaIndex: -1,
      dialogVisible: false,
      show: this.visible,
      iconContent: '',
      //http methods list
      httpMethodList: [
        {
          label: 'GET',
          value: 'GET'
        },
        {
          label: 'POST',
          value: 'POST'
        },
        {
          label: 'DELETE',
          value: 'DELETE'
        },
        {
          label: 'PUT',
          value: 'PUT'
        }
      ]
    }
  },
  computed: {
    multiPortal() {
      return this.$store.getters.multiPortal
    },
    isGeneral() {
      return this.$store.getters[AUTH_PORTAL].portalId ? false : true
    },
    title() {
      switch (this.form.operate_type) {
        case 'add':
          return this.LANG.ADD
        case 'view':
          return this.LANG.VIEW
        default:
          return this.LANG.EDIT
      }
    },
    rules() {
      let validateCode = (rule, value, callback) => {
        if (!/^[a-zA-Z0-9]+(:[a-zA-Z0-9]*)*[a-zA-Z0-9]$/.test(value)) {
          callback(new Error(this.LANG.CODE_RULE))
        } else {
          callback()
        }
      }
      return {
        code: [{ validator: validateCode, trigger: 'blur' }]
      }
    },
    portal() {
      return this.$store.state.portal
    }
  },
  watch: {
    data() {
      this.form = Object.assign({ url: '', httpMethod: '' }, this.data)
      this.form.isGeneral = this.form.isGeneral ?? this.isGeneral
      if(this.form.operate_type=='add'){
        this.$set(this.form, 'isAuth', true)
      }
    },
    visible() {
      this.show = this.visible
    }
  },
  methods: {
    //获得图标,param为图标对象
    saveSelect(param) {
      this.form.icon = param.code
      this.iconContent = param.content
    },
    submit() {
      const authId = this.form.id
      if (this.metas.length) {
        const meta = {}
        this.metas.forEach((item) => {
          meta[item.key] = item.value
        })
        this.form.meta = JSON.stringify(meta)
      }
      let action = 'saveButton'
      if (this.form.operate_type == 'add') {
        action = 'addButton'
        this.form.type =
          this.$store.getters[AUTH_PORTAL].type || this.portal.type
      }
      this.form.menuId = this.menuId
      if (!this.form.isAuth) {
        this.form.isAuth = false
      }
      if (!this.form.isGeneral) {
        this.form.portalId = this.$store.getters[AUTH_PORTAL].portalId
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          Auth[action](this.form)
            .then((res) => {
              if (res.status) {
                if (this.form.operate_type == 'add') {
                  this.$message.success(this.LANG.ADD_SUCCESS)
                } else {
                  this.$message.success(this.LANG.EDIT_SUCCESS)
                }
                this.form = {}
                const data = JSON.parse(JSON.stringify(res.data))
                // this.$parent.expendList = [authId] // 设置路由树的默认展开节点，让父页面的对应子节点在数据更新后展开
                this.$parent.getButtons() // 更新树结构的数据
                this.close()
              }
            })
            .catch(() => {})
        }
      })
    },
    close() {
      this.$refs.form.resetFields()
      this.show = false
      //清空图标
      this.iconContent = ''
      this.$emit('update:visible', this.show)
    },
    addMeta() {
      this.dialogVisible = true
    },
    editMeta(val, index) {
      this.meta = Object.assign(
        {
          key: '',
          value: ''
        },
        val
      )
      this.metaIndex = index
      this.dialogVisible = true
    },
    deleteMeta(val) {
      this.metas.splice(val, 1)
    },
    cancel() {
      this.dialogVisible = false
      this.meta = {
        key: '',
        value: ''
      }
      this.metaIndex = -1
    },
    done() {
      if (this.metaIndex < 0) {
        this.metas.push(this.meta)
      } else {
        this.metas.splice(this.metaIndex, 1, this.meta)
      }
      this.cancel()
    }
  }
}
</script>
<style lang="scss" scoped>
.routerMeta-header {
  width: 100%;
  padding: 0 10px;
  border: 1px solid #f1f3f7;
  border-bottom: none;
  text-align: right;
  background: #f5f6fa;
}

.edit-input {
  .fks-input__inner,
  .fks-textarea__inner {
    border-width: 0;
    resize: none;
    background-color: #fff;

    &:hover {
      background-color: #f5f7fa;
    }

    &:focus {
      border-width: 1px;
      resize: vertical;
      background-color: #fff;

      + .fks-input__suffix {
        opacity: 1;
      }
    }
  }

  .fks-input__suffix {
    opacity: 0;
  }

  &:hover {
    .fks-cascader__label {
      border-radius: 4px;
      background-color: #f5f7fa;
    }
  }
}

.fawkes-form-item.is-error .edit-input {
  .fks-input__inner,
  .fks-textarea__inner {
    border-width: 1px;
    background-color: #fff;
  }
}

.show-suffix {
  .fks-input__suffix {
    opacity: 1;
  }
}

.except-input {
  padding: 0 15px;
}

.icon-input ::v-deep .fks-input__inner {
  cursor: pointer;
}

.select {
  width: 100%;
}

::v-deep .fks-dialog__body {
  padding-bottom: 0;
}
</style>